<template>
<div id="MyC">
    <Head/>
    <div style="padding-top:60px;" class="Myc">
        <el-row>
            <el-col :span="15" :xs="24" class="yd-Header">
                <div class="grid-content bg-purple">
                    <el-col :span="24" :xs="24"><ConterH></ConterH></el-col>
                    <el-col :span="24" :xs="24" class="contR"><ConterL></ConterL></el-col>
                </div>
            </el-col>
            <el-col :span="8" :offset="1">
                <div class="grid-content bg-purple-light hidden-xs-only">
                <ConterR></ConterR>
                </div>
            </el-col>
        </el-row>
    </div>
    <div class="Goback hiddem-xs-only">
        <li class="hidden-sm-and-up yd-fanhui" :class="{'actives':index === isActives}" @click="changeTabs(index)">
            <router-link to="/yd-wode"><p><i class="el-icon-back"></i></p></router-link></li>
    </div>
</div>
</template>
<script>
    import Head from '../Head'
import ConterH from './conter-H'
import ConterL from './conter-L'
import ConterR from './conter-R'
export default ({
    name:'MyC',
    methods:{
        changeTabs(index){
            this.isActives=index;
        }
    },
    components:{
        Head,
        ConterH,
        ConterR,
        ConterL,
    }
    
})
</script>
<style scoped>
.Myc{
    margin-left: 20%;
    width: 60%;
}
.actives{
    background-color: #f0f0f0;
    color: #ff4f4c;
}
.Goback li{
    text-align: center;
    line-height: 50px;
    position: fixed;
    bottom: 30px;
    left: 30px;
    background-color: #b3b3b3;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    font-size: 35px;
    opacity:0.5;
}
.Goback li i{
    color: #fff;
}
@media screen and (max-width: 750px){
    #MyC{
        margin-bottom: 50px !important;
    }
    .Myc{
        width: 100%;
        margin-left: 0;
    }
    .yd-Header{
        /*padding: 0 !important;*/
    }
    .contR{
        margin-top: 30px;
    }
}

</style>


